<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .back {
            background: skyblue;
        }

        .drag-active {
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <div id="ull">
        <div draggable="true" class="back">
            <div>
                <p>1</p>
                <p>
                    descriptionxxxxxxx
                </p>
            </div>
            <div>
                content-area
            </div>
        </div>
        <div draggable="true" class="back">
            <div>
                <p>2</p>
                <p>
                    descriptionxxxxxxx
                </p>
            </div>
            <div>
                content-area
            </div>
        </div>
        <div draggable="true" class="back">
            <div>
                <p>3</p>
                <p>
                    descriptionxxxxxxx
                </p>
            </div>
            <div>
                content-area
            </div>
        </div>
        <div draggable="true" class="back">
            <div>
                <p>4</p>
                <p>
                    descriptionxxxxxxx
                </p>
            </div>
            <div>
                content-area
            </div>
        </div>
        <div draggable="true" class="back">
            <div>
                <p>5</p>
                <p>
                    descriptionxxxxxxx
                </p>
            </div>
            <div>
                content-area
            </div>
        </div>
    </div>
</body>
<script>
    const ull = document.querySelector('#ull')
    let source = null
    let curIndex = 0
    ull.addEventListener('dragstart', (e) => {
        source = e.target
        e.target.classList.add('drag-active')
        curIndex = Array.from(ull.children).indexOf(e.target)
        e.dataTransfer.effectAllowed = 'move'

    })
    ull.addEventListener('dragover', (e) => {
        e.preventDefault()
    })
    ull.addEventListener('drop', e => {
        e.preventDefault()
        source.classList.remove('drag-active')
    })
    ull.addEventListener('dragenter', (e) => {
        const childList = Array.from(ull.children)
        if (childList.indexOf(e.target) < 0 || curIndex === childList.indexOf(e.target)) {
            return
        }
        console.log(curIndex, childList.indexOf(e.target), e.target)
        if (curIndex > childList.indexOf(e.target)) {
            ull.insertBefore(source, e.target)
        } else {
            ull.insertBefore(source, e.target.nextElementSibling)
        }

    })

</script>

</html>